
  <!-- 栏目权限管理 -->
<template>
  <!-- 顶部搜索 -->
  <div style="display: flex; margin-left: 70%;">
    <el-select v-model="state.queryForm.name" placeholder="请选择" style="width: 10rem;" @change="handleSelectChange">
      <el-option v-for="item in state.dataList" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>
    <el-button type="primary" style="margin-left: 10px;" @click="searchs()" :disabled="sousuobut">搜索</el-button>
    <el-button type="primary" :disabled="isButtonDisabled" @click="permission()" style="margin-bottom: 10px;">分配权限
    </el-button>

  </div>

  <!-- table 表格 -->
  <el-table :data="data.tableData" row-key="id" table-layout="auto" style="width: 100%" @selection-change="handleSelectionChange" v-model:selection="selectedRows" ref="tableRef">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="name" label="栏目名称" width="" />
    <el-table-column prop="description" label="描述" width="" />
    <el-table-column prop="createTime" label="创建时间" width="" />
    <el-table-column prop="createdByName" label="创建人" width="" />
    <el-table-column prop="updateTime" label="更新时间" width="" />
    <el-table-column prop="modifiedByName" label="更新人" width="" />
    <el-table-column prop="deleted" label="删除标识" width="">
      <template #default="scope">
        <span v-if="scope.row.deleted === 0">正常</span>
        <span v-if="scope.row.deleted === 1">已删除</span>
      </template>
    </el-table-column>
    <el-table-column prop="sort" label="排序" width="" />
  </el-table>
  <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getList" @current-change="getList" style="margin-top: 20px;display:flex;justify-content: flex-end;" />
</template>
  
  <script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { listColumn, editPColumn, editSColumn, deletePColumn, deleteSColumn, ColumnPermissions, Permissionadd } from '@/api/allApi'
//   import dialogForm from '../columnManage/dialogForm.vue'
import { ElMessage, ElMessageBox } from 'element-plus/es'
import PermissionFrom from './PermissionFrom.vue'
import { useCrud } from '@/hooks'
import Search from './search.vue'

const tableRef = ref()
const pageNum = ref(1) //第几页
const pageSize = ref(10) //每页多少条
const total = ref(0) //总条数
const data = reactive({
	tableData: []
})

onMounted(() => {
	getList()
})

// 复选框
const selectedRows = ref([])
// 选中行
const addnum = ref(0)
// 控制按钮是否禁用
const isButtonDisabled = ref(true)
const sousuobut = ref(true)

// sysRoleId  赋值
const searchnum = ref('')

// 搜索赋值
const ids = ref('')
const idsrr = ref('')

// 处理选中行的变化
const handleSelectionChange = val => {
	selectedRows.value = val.map(item => item.id) // 存储选中的行的id
	console.log(selectedRows.value, '存储选中的行的id')
	addnum.value = val.map(row => row.id)

	// console.log(addnum.value,'addnum')
	isButtonDisabled.value = val.length === 0
}

// 搜索
const searchs = () => {
	ColumnPermissions({
		sysRoleId: searchnum.value
	}).then((res: any) => {
		console.log(res, 'res')
		ids.value = res.data.categoryIds
		idsrr.value = res.data.sysRoleId

		console.log(ids.value, 'red')
		const rows = res.data.categoryIds.split(',')
		for (let i = 0; i < data.tableData.length; i++) {
			const e = data.tableData[i]
			rows.forEach(row => {
				if (e.id == row) {
					tableRef.value.toggleRowSelection(data.tableData[i], true)
				}
			})
		}
	})
}

// 权限
const permission = () => {
	// 创建一个包含所有需要传递给 Permissionadd 的属性的对象

	console.log(searchnum.value, 'searchnum.value ')
	console.log(idsrr.value, 'idsrr.value')
	const params = {
		categoryIds: addnum.value.join(','),
		sysRoleId: idsrr.value
	}

	// 将这个对象作为参数传递给 Permissionadd 函数
	Permissionadd(params)
		.then((res: any) => {
			console.log(res, 'res权限')
			ElMessage.success('分配权限操作成功')
		})
		.catch(error => {
			ElMessage.error('分配权限操作失败')
			// console.error('Error adding permission:', error);
		})
}

// 获取初始化数据
const getList = () => {
	listColumn({
		websiteId: Number(localStorage.getItem('WebsiteId')), //网站id 1：鞍钢官网 2：博物馆
		pageNum: pageNum.value,
		pageSize: pageSize.value
	}).then((res: any) => {
		if (res.code === 0) {
			data.tableData = res.data.list
			total.value = res.data.total
		} else {
			ElMessage.success(res.msg)
		}
	})
}

const state: IHooksOptions = reactive({
	dataListUrl: '/sys/role/page',
	deleteUrl: '/sys/role',
	queryForm: {
		name: '',
		id: ''
	},
	dataList: [] // 假设您从服务器获取数据后会填充这个数组
})

// console.log(state,'dataList')

// 处理下拉框选择变化的方法
const handleSelectChange = selectedItem => {
	if (selectedItem === '') {
		sousuobut.value = true
	} else {
		sousuobut.value = false
		// console.log("22222");
	}

	searchnum.value = selectedItem
	getList() //从新获取页面
	// console.log(selectedItem,"selectedItem11111111111");
}

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle, reset } = useCrud(state)
</script>
  
  <style lang="scss" scoped>
//搭配el-table里的table-layout="auto"属性，再让每一列里的width为空即可展现出适应表格内容的列宽
:deep(.el-table .cell) {
	width: max-content;
	display: inline-block;
}
</style>
  